<template>
  <div class="wrapper">
    <!-- 流程图 -->
    <Row :gutter="10">
      <Col :md="{span: 24}">
        <Card style="text-align: left;">
          <template slot="title">
            <span style="font-weight: 700;">
              <Icon type="map"></Icon>
              <span>业务流程</span>
            </span>
          </template>
          <Steps :current="currentStep">
            <Step v-for="(step, index) in steps" :key="index" :title="step.state_name"></Step>
          </Steps>
        </Card>
      </Col>
    </Row>
    <!-- 详情与操作 -->
    <Row :gutter="1" style="text-align: left; margin: 5px 0;">
      <Col :md="{span: 24}">
        <Card id="ticket-detail">
          <template slot="title">
            <span style="font-weight: 700;">
              <Icon type="android-clipboard"></Icon>
              <span>{{workflow.description}}</span>
            </span>
          </template>
          <Row>
            <Form :model="detailForm" ref="detailForm" :rules="detailFormRules" :label-width="150">
              <Col
                v-for="(field, index) in shortFieldList"
                :key="index"
                :md="{span: field.field_type_id === 55 ? 22 : 11}"
              >
                <template v-if="field.field_attribute === 2">
                  <FormItem
                    v-if="field.field_type_id === 5"
                    :label="field.name || field.field_name"
                    :prop="field.field_key"
                  >
                    <Input
                      v-model="detailForm[field.field_key]"
                      :placeholder="$t(`field_label.${field.field_key}`)"
                    ></Input>
                  </FormItem>
                  <FormItem
                    v-else-if="field.field_type_id === 15"
                    :prop="field.field_key"
                    :label="field.name || field.field_name"
                  >
                    <InputNumber
                      v-model="detailForm[field.field_key]"
                      :min="0"
                      :step="0.5"
                      style="width: 100%;"
                    ></InputNumber>
                  </FormItem>
                  <FormItem
                    v-else-if="field.field_type_id === 30"
                    :prop="field.field_key"
                    :label="field.name || field.field_name"
                  >
                    <DatePicker
                      v-model="detailForm[field.field_key]"
                      type="datetime"
                      format="yyyy-MM-dd HH:mm:ss"
                      style="width: 100%;"
                      :placeholder="$t(`field_label.${field.field_key}`)"
                    ></DatePicker>
                  </FormItem>
                  <FormItem
                    v-else-if="field.field_type_id === 40"
                    :prop="field.field_key"
                    :label="field.name || field.field_name"
                  >
                    <Select
                      v-model="detailForm[field.field_key]"
                      multiple
                      :placeholder="$t(`field_label.${field.field_key}`)"
                    >
                      <Option
                        v-for="(choice, i) in Object.keys(field.field_choice)"
                        :key="i"
                        :value="choice"
                      >{{field.field_choice[choice]}}
                      </Option>
                    </Select>
                  </FormItem>
                  <FormItem
                    v-else-if="[35, 45].includes(field.field_type_id)"
                    :prop="field.field_key"
                    :label="field.name || field.field_name"
                  >
                    <Select
                      v-model="detailForm[field.field_key]"
                      :placeholder="$t(`field_label.${field.field_key}`)"
                    >
                      <Option
                        v-for="(choice, i) in Object.keys(field.field_choice)"
                        :key="i"
                        :value="choice"
                      >{{field.field_choice[choice]}}
                      </Option>
                    </Select>
                  </FormItem>
                  <FormItem
                    v-else-if="field.field_type_id === 60"
                    :prop="field.field_key"
                    :label="field.name || field.field_name"
                  >
                    <Select
                      v-model="detailForm[field.field_key]"
                      :placeholder="$t(`field_label.${field.field_key}`)"
                    >
                      <Option
                        v-for="(user, index) in accountList"
                        :key="index"
                        :value="user.username"
                      >{{user.alias}}
                      </Option>
                    </Select>
                  </FormItem>
                  <FormItem
                    v-else-if="field.field_type_id === 55"
                    :prop="field.field_key"
                    :label="field.name || field.field_name"
                  >
                    <tinymce v-model="detailForm[field.field_key]" :id="field.field_key" ref="tm"></tinymce>
                  </FormItem>
                </template>
                <template v-else-if="field.field_attribute === 1">
                  <FormItem :label="field.name || field.field_name">
                    <div class="disabled_field" v-html="displaySelectKey(field)"></div>
                  </FormItem>
                </template>
              </Col>
              <Col :md="{span: 22}" v-if="transitions.length > 0">
                <FormItem label="处理意见" :prop="detailForm['suggestion']">
                  <Input type="textarea" v-model="suggestion" placeholder="请输入处理意见"></Input>
                </FormItem>
              </Col>
              <Col :md="{span: 24, offset: 2}">
                <Button
                  v-for="(btn, index) in transitions"
                  :key="index"
                  type="primary"
                  style="margin: 10px 10px;"
                  @click="handleTicketTransition('detailForm', btn)"
                >{{btn.transition_name}}
                </Button>
              </Col>
            </Form>
          </Row>
        </Card>
      </Col>
    </Row>
    <!-- 日志 -->
    <Row :gutter="10">
      <Col :md="{span: 24}">
        <Card style="text-align: left;">
          <template slot="title">
            <span style="font-weight: 700;">
              <Icon type="clipboard"></Icon>
              <span>操作日志</span>
            </span>
          </template>
          <Table :columns="logtable.columns" :data="logtable.data"></Table>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
    import Utils from "../../utils";
    import Validators from "../../utils/validators";
    import {Date} from "../../utils/datetime";

    export default {
        name: "ticket-detail",
        data() {
            return {
                ticket: {},
                workflow: {},
                logtable: {
                    columns: [
                        {
                            key: "state",
                            title: "节点名称",
                            align: "center",
                            render: (h, params) => {
                                return h("div", [h("span", {}, params.row.state.state_name)]);
                            }
                        },
                        {
                            key: "participant",
                            title: "参与者",
                            align: "center"
                        },
                        {
                            key: "gmt_created",
                            title: "操作时间",
                            align: "center"
                        },
                        {
                            key: "suggestion",
                            title: "处理意见",
                            align: "center",
                            render: (h, params) => {
                                return h("div", [
                                    h(
                                        "span",
                                        {},
                                        params.row.suggestion ? params.row.suggestion : "未填写"
                                    )
                                ]);
                            }
                        }
                    ],
                    data: []
                },
                accountList: [],
                steps: [],
                currentStep: 1,
                cardHeight: "",
                stepTransition: {},
                transitions: [],
                suggestion: "",
                detailForm: {},
                detailFormRules: {}
            };
        },
        methods: {
            init() {
                this.$store
                    .dispatch("api_get_ticket_detail", {id: this.ticket_id})
                    .then(resp => {
                        this.ticket = resp.data.data.value;
                        let workflow_id = this.ticket.workflow_id;
                        this.$store.dispatch("api_workflows").then(resp => {
                            let workflows = resp.data.data.value;
                            this.workflow = workflows.filter(item => {
                                if (item.id === workflow_id) {
                                    return true;
                                }
                            })[0];
                        });
                        this.$store
                            .dispatch("api_get_ticket_transiton_list", {id: this.ticket.id})
                            .then(resp => {
                                this.logtable.data = resp.data.data.value;
                            });
                        this.$store
                            .dispatch("api_get_ticket_step_list", {id: this.ticket.id})
                            .then(resp => {
                                this.steps = resp.data.data.value;
                            });
                        this.$store
                            .dispatch("api_get_ticket_transitions", {id: this.ticket.id})
                            .then(resp => {
                                this.transitions = resp.data.data.value;
                            })
                            .catch(error => {
                                this.$Notice.info({title: "当前状态您无法处理该工单"});
                            });
                        this.$store.dispatch("api_fetch_account_list").then(resp => {
                            this.accountList = resp.data.data;
                        });
                    })
                    .catch(error => {
                        this.$Notice.error({title: "接口错误或数据不存在！"});
                    });
            },
            handleTicketTransition(formName, btn) {
                // console.log(this.detailForm, this.detailFormRules, btn)
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        let data = {
                            id: this.ticket.id,
                            data: {
                                transition_id: btn.transition_id,
                                suggestion: this.suggestion
                                    ? this.suggestion
                                    : btn.transition_name
                            }
                        };
                        let formData = {};
                        let detailFormKeys = Object.keys(this.detailForm);
                        let fieldList = this.ticket.field_list;
                        for (let i = 0; i < fieldList.length; i++) {
                            for (let j = 0; j < detailFormKeys.length; j++) {
                                if (
                                    [25, 30].includes(fieldList[i].field_type_id) &&
                                    fieldList[i].field_key === detailFormKeys[j]
                                ) {
                                    this.detailForm[detailFormKeys[j]] = this.detailForm[
                                        detailFormKeys[j]
                                        ].format("yyyy-MM-dd hh:mm:ss");
                                }
                            }
                        }
                        Object.assign(data.data, this.detailForm);
                        this.$store
                            .dispatch("api_handle_ticket_action", data)
                            .then(resp => {
                                this.$Notice.success({title: "处理成功"});
                                this.$router.push({name: "todo"});
                            })
                            .catch(error => {
                                this.$Notice.error({title: "工单处理失败"});
                                console.log(error);
                            });
                    } else {
                        console.log("form error");
                        return false;
                    }
                });
                if (Object.keys(this.detailForm).length === 0) {
                    let data = {
                        id: this.ticket.id,
                        data: {
                            transition_id: btn.transition_id,
                            suggestion: this.suggestion ? this.suggestion : btn.transition_name
                        }
                    };
                    this.$store
                        .dispatch("api_handle_ticket_action", data)
                        .then(resp => {
                            this.$Notice.success({title: "处理成功"});
                            this.$router.push({name: "todo"});
                        })
                        .catch(error => {
                            this.$Notice.error({title: "工单处理失败"});
                            console.log(error);
                        });
                }
            }
        },
        computed: {
            ticket_id() {
                return this.$route.params.id;
            },
            displaySelectKey(argument) {
                return argument => {
                    if (argument.field_type_id === 45) {
                        return argument.field_choice[argument.field_value];
                    }
                    return argument.field_value;
                };
            },
            displaySelectKey(argument) {
                return argument => {
                    if (argument.field_type_id === 45) {
                        return argument.field_choice[argument.field_value];
                    }
                    return argument.field_value;
                };
            },
            // choiceFieldDisplay () {
            //   let result
            //   this.ticket.field_list.filter(item => {
            //     if (item.field_type_id === 35) {
            //       let keys = Object.keys(item.field_choice);
            //       for (let i = 0; i < keys.length; i++) {
            //         if (item.value === keys[i] || item.field_value === keys[i]) {
            //           result = item.field_choice[keys[i]];
            //         }
            //       }
            //       if (!result) {
            //         result = "——";
            //       }
            //     }
            //   });
            //   return result;
            // },
            shortFieldList() {
                if (this.ticket && this.ticket.field_list) {
                    let result = [];
                    for (let i = 0; i < this.ticket.field_list.length; i++) {
                        // console.log("这里是field_list",this.ticket.field_list)
                        if (this.ticket.field_list[i].field_type_id === 55) {
                            continue;
                        } else {
                            result.push(this.ticket.field_list[i]);
                        }
                    }
                    this.ticket.field_list.map(item => {
                        if (item.field_type_id === 55) {
                            result.push(item);
                        }
                    });
                    return result;
                }
            }
        },
        watch: {
            steps() {
                if (this.steps[0] && this.steps[0].state_id) {
                    let current_order_id;
                    let current = [];

                    for (let i in this.steps) {
                        if (this.steps[i].state_id == this.ticket.state_id) {
                            current_order_id = this.steps[i].order_id;
                        }
                        current.push(this.steps[i].order_id);
                    }

                    current.sort();

                    this.currentStep = current.indexOf(current_order_id);

                    this.steps.filter(item => {
                        // console.log(`${item.state_id} ---> ${this.ticket.state_id}`);
                        if (item.state_id === this.ticket.state_id) {
                            this.stepTransition = item;
                        }
                    });
                }
            },
            ticket() {
                let fieldList = this.ticket.field_list;
                for (let i = 0; i < fieldList.length; i++) {
                    if (fieldList[i].field_attribute === 2) {
                        // 动态设置detailForm表单默认值
                        this.detailForm[fieldList[i].field_key] =
                            fieldList[i].value || fieldList[i].field_value;
                        // 动态设置detailForm表单验证
                        if ([5, 35, 45, 55, 60].includes(fieldList[i].field_type_id)) {
                            this.detailFormRules[fieldList[i].field_key] = [
                                {required: true, type: "string", trigger: "blur"}
                            ];
                        } else if ([25, 30].includes(fieldList[i].field_type_id)) {
                            this.detailFormRules[fieldList[i].field_key] = [
                                {required: true, type: "date", trigger: "blur"}
                            ];
                        } else if ([40, 50, 70].includes(fieldList[i].field_type_id)) {
                            this.detailFormRules[fieldList[i].field_key] = [
                                {required: true, type: "array", trigger: "blur"}
                            ];
                        } else if ([10, 15].includes(fieldList[i].field_type_id)) {
                            this.detailFormRules[fieldList[i].field_key] = [
                                {required: true, type: "number", trigger: "blur"}
                            ];
                        } else if (fieldList[i].field_type_id === 20) {
                            this.detailFormRules[fieldList[i].field_type_id] = [
                                {required: true, type: "boolean", trigger: "blur"}
                            ];
                        }
                    }
                }
            }
        },
        mounted() {
            this.init();
        }
    };
</script>

<style scoped>
  .ivu-form {
    font-size: 15px;
  }

  .ivu-form-item {
    margin-bottom: 4px;
    vertical-align: top;
    zoom: 1;
  }

  .disabled_field {
    overflow: hidden;
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
    line-height: 32px;
    color: rgba(0, 0, 0, 0.4);
  }

.ivu-card {
  background: #fff;
}
</style>
